import $ from "jquery";
import { symbolIcon } from "../../assets/icon/svg-icon.ts";
class MyModalMenu {
  // TS 语法
  // class MyModalMenu {                       // JS 语法

  constructor() {
    this.title = '特殊符号'
    this.iconSvg = symbolIcon
    this.tag = 'button'
    this.showModal = true
    this.modalWidth = 420
  }

  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive(editor) {
    // TS 语法
    // isActive(editor) {                      // JS 语法
    return false
  }

  // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue(editor) {
    // TS 语法
    // getValue(editor) {                               // JS 语法
    return ''
  }

  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled(editor) {
    // TS 语法
    // isDisabled(editor) {                     // JS 语法
    return false
  }

  // 点击菜单时触发的函数
  exec(editor, value) {
    // TS 语法
    // exec(editor, value) {                              // JS 语法
    // Modal menu ，这个函数不用写，空着即可
  }

  // 弹出框 modal 的定位：1. 返回某一个 SlateNode； 2. 返回 null （根据当前选区自动定位）
  getModalPositionNode(editor) {
    // TS 语法
    // getModalPositionNode(editor) {                             // JS 语法
    return null // modal 依据选区定位
  }

  // 定义 modal 内部的 DOM Element
  getModalContentElem(editor) {
    // 创建容器
    const $container = $(`
        <div class="symbol-selector-container">
            <div class="symbol-tabs"></div>
            <div class="symbol-content"></div>
        </div>
    `);

    // 分类特殊符号
    const symbolCategories = [
        {
            id: "common",
            name: "常用符号",
            symbols: ['★', '☆', '♥', '♡', '✓', '✔', '✕', '✖', '☑', '☒', '※', '◎', '●', '○', '◆', '◇', '■', '□', '▲', '△', '▼', '▽','♂', '♀']
        },
        {
            id: "arrows",
            name: "箭头符号",
            symbols: ['←', '→', '↑', '↓', '↔', '↕', '⇧', '⇩', '⇨', '⇦', '➔', '➙', '➜', '➝', '➞', '➟', '➠', '➡', '➢', '➣', '➤', '➥', '➘', '➚' ]
        },
        {
            id: "math",
            name: "数学符号",
            symbols: ['+', '−', '×', '÷', '=', '≠', '≈', '≡', '≤', '≥', '∞', '∝', '∑', '∏', '√', '∫', '∬', '∭', '∮', '∯', '∀', '∃','㏑', '㏒']
        },
        {
            id: "currency",
            name: "货币符号",
            symbols: ['¥', '$', '€', '£', '¢', '¤', '₽', '₹', '₩', '฿', '₫', '₱', '₦', '₮', '₴', '₡', '₳', '₲', '₵', '₸', '₪', '₭','₠','￥']
        },
        {
            id: "numbers",
            name: "数字序号",
            symbols: ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳', '⑴', '⑵','⑶','⑷', '⑸', '⑹', '⑺', '⑻', '⑼', '⑽', '⑾', '⑿', '⒀', '⒁', '⒂', '⒃', '⒄', '⒅', '⒆', '⒇']
        },
        {
            id: "units",
            name: "单位符号",
            symbols: ['℃', '℉', '°', '%', '‰', '㎎', '㎏', '㎜', '㎝', '㎞', '㎡', '㏄', '㏎', '㏑', '㏒', '㏕', 'Å', 'Ω', 'μ', 'π', 'α', 'β','m³','mol']
        }
    ];

    // 创建选项卡
    const $tabs = $container.find('.symbol-tabs');
    symbolCategories.forEach((category, index) => {
        const $tab = $(`<div class="symbol-tab ${index === 0 ? 'active' : ''}" data-category="${category.id}">${category.name}</div>`);
        $tabs.append($tab);
    });

    // 创建内容区域
    const $content = $container.find('.symbol-content');
    
    // 初始显示第一个分类
    renderCategory(symbolCategories[0]);

    // 选项卡点击事件
    $container.on('click', '.symbol-tab', function() {
        const categoryId = $(this).data('category');
        $container.find('.symbol-tab').removeClass('active');
        $(this).addClass('active');
        
        const category = symbolCategories.find(c => c.id === categoryId);
        if (category) {
            renderCategory(category);
        }
    });

    // 符号点击事件
    $container.on('click', '.symbol-item', function(e) {
        e.preventDefault();
        const symbol = $(this).data('symbol');
        editor.restoreSelection();
        editor.insertText(symbol);
    });

    // 渲染分类函数
    function renderCategory(category) {
        $content.empty();
        const $grid = $('<div class="symbol-grid"></div>');
        
        category.symbols.forEach(symbol => {
            const $item = $(`
                <div class="symbol-item" data-symbol="${symbol}">
                    <div class="symbol-preview">${symbol}</div>
                </div>
            `);
            $grid.append($item);
        });
        
        $content.append($grid);
    }

    return $container[0];
}
}
export default MyModalMenu